<template>
  <div class="book-container">
    <div class="book-prev">
      <img class="book-img-prev" src="/img/button/shuqian3.png" v-show="curPage > 0" @click="previous(pageList.length)" />
    </div>
    <div class="book-next">
      <img class="book-img-next" src="/img/button/shuqian1.png"
        v-show="pageList.length < 3 ? curPage < pageList.length - 1 : curPage < pageList.length - 2"
        @click="next(pageList.length)" />
    </div>
    <div class="book">
      <div v-for="(item, i) in pageList" :class="'p' + (i + 1) + ' book-page'"
        :style="pageStyle(item, i, pageList.length)">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Book",
  props: ["pages"],
  data() {
    return {
      curPage: 0,
      pageList: [
        { url: "/img/style/simiao.jpg" },
        { url: "/img/style/zhongta.jpg" },
        { url: "/img/style/lake.jpg" },
        { url: "/img/style/waterfall.jpg" },
        { url: "/img/style/simiao.jpg" },
        { url: "/img/style/zhongta.jpg" },
        { url: "/img/style/lake.jpg" },
        { url: "/img/style/waterfall.jpg" },
      ],
    }
  },
  computed: {
    pageStyle: function () {
      return function (item, i, len) {
        return this.calcPageStyle(item, i, len);
      }
    },
  },
  methods: {
    //下一页
    next(len) {
      //两页一组翻转
      this.curPage += 1;
      let b = this.$el.parentElement.querySelector(".book");
      let p = this.$el.parentElement.querySelector(".p" + this.curPage);
      p.style.transform = "rotateY(-180deg)";
      p.style.zIndex = "calc(var(--t)*9)";

      //总页数小于3时单页一组
      if (len > 2) {
        this.curPage += 1;
        p = this.$el.parentElement.querySelector(".p" + this.curPage);
        p.style.transform = "rotateY(-180deg)";
        p.style.zIndex = "calc(var(--t)*9)";
      }

      let offset = 10 * (this.curPage - 1)
      if (offset > 30) {
        offset = 30
      }
      b.style.transform = "translateX(" + offset + "px)";
    },
    //上一页
    previous(len) {
      //两页一组翻转
      let b = this.$el.parentElement.querySelector(".book");
      let p = this.$el.parentElement.querySelector(".p" + this.curPage);
      p.style.transform = "rotateY(0deg)";
      p.style.zIndex = "calc(var(--v)*9)";
      this.curPage -= 1;

      //总页数小于3时单页一组
      if (len > 2) {
        p = this.$el.parentElement.querySelector(".p" + this.curPage);
        p.style.transform = "rotateY(0deg)";
        p.style.zIndex = "calc(var(--v)*9)";
        this.curPage -= 1;
      }

      let offset = 10 * (this.curPage - 1)
      if (offset > 30) {
        offset = 30
      }
      b.style.transform = "translateX(" + offset + "px)";
    },
    //计算页面样式
    calcPageStyle(item, i, len) {
      let index = i + 1;
      let style = {
        "--v": len - index + 1,
        "--t": index,
        backgroundImage: "url('" + item.url + "')",
        backfaceVisibility: "visible",
        border: "",
        borderLeft: "",
        top: "",
        borderRadius: "",
      };
      //单数页隐藏背面,总页数大于2才隐藏封面
      if (index % 2 != 0 && len > 2) {
        style.backfaceVisibility = "hidden";
      }

      //是否是第一页、第二页或者最后一页
      if (index == 1 || index == 2 || index == len) {
        style.border = "solid 20px rgb(136, 124, 95)";
        style.borderLeft = "none";
        style.top = "-20px";
        style.borderRadius = "0 20px 20px 0";
        //总页数大于2才隐藏封面
        if (len > 2 && index != 2) {
          style.backfaceVisibility = "hidden";
        }
      }
      return style;
    },
  },
  created() {
    if (this.$props.pages) {
      this.pageList = this.$props.pages;
    }
  },
  mounted() {

  }
}
</script>

<style>
@import url("@/assets/css/style/book.css");
</style>